<template>
    <div class="warpLogin">
        <el-container>
            <el-header>
                <div class="headerContent">Wechat Multiple-Spot Sampling</div>
            </el-header>
            <el-main>
                <div class="loginWrap">
                    <div class="loginContent">
                        <div class="loginTop">系统登录</div>
                        <el-form :model="ruleLoginForm" status-icon :rules="rulesLogin" ref="ruleLoginForm" class="loginRuleForm">
                            <el-form-item prop="user">
                                <el-input class="loginInput" v-model="ruleLoginForm.user" prefix-icon="fa fa-user-o" auto-complete="off" placeholder="输入账号"></el-input>
                            </el-form-item>
                            <input type="hidden"> <input type="password" name="pass" v-show="false">
                            <el-form-item prop="pass">
                                <el-input class="loginInput" type="text" onfocus="this.type='password'" prefix-icon="fa fa-key" v-model="ruleLoginForm.pass" auto-complete="off" placeholder="输入密码"></el-input>
                            </el-form-item>
                            <el-form-item prop="verify">
                                <el-row>
                                    <el-col :span="15"><el-input class="loginInput loginInputVerify" type="text" v-model="ruleLoginForm.verify" auto-complete="off" placeholder="输入验证码"></el-input></el-col>
                                    <el-col :span="8" class="txtRight"><img width="100" alt="点击刷新验证码" title="点击刷新验证码" height="40" :src="captcha" @click="referCaptcha()"></el-col>
                                </el-row>
                            </el-form-item>
                            <el-form-item>
                                <el-button :disabled="loginDisabled" type="primary" style="width:100%;height:44px;margin-top:20px" size="medium" @click="submitForm('ruleLoginForm')">登录</el-button>
                            </el-form-item>
                        </el-form>
                    </div>
                </div>
            </el-main>
            <el-footer><div class="copyright">Copyright©2018-2020 All Rights Reserved.</div></el-footer>
        </el-container>
    </div>
</template>

<script>

export default {
  data () {
    return {
      currentDate: new Date(),
      ruleLoginForm: {user: '', pass: '', verify: ''},
      captcha: '',
      rulesLogin: {
        user: [{
          validator: (rule, value, callback) => {
            if (!value) {
              return callback(new Error('账号不能为空'))
            } else {
              callback()
            }
          },
          trigger: 'blur' }],
        pass: [{
          validator: (rule, value, callback) => {
            if (value === '') {
              callback(new Error('请输入密码'))
            } else {
              callback()
            }
          },
          trigger: 'blur' }],
        verify: [{
          validator: (rule, value, callback) => {
            if (value === '') {
              callback(new Error('请输入验证码'))
            } else {
              callback()
            }
          },
          trigger: 'blur' }]
      },
      loginDisabled: false
    }
  },
  methods: {
    submitForm: function (formName) {
      let vm = this
      vm.loginDisabled = true
      setTimeout(() => {
        vm.loginDisabled = false
      }, 3000)
      vm.$refs[formName].validate((valid) => {
        if (valid) {
          this.$axios.get(this.APIURL + '/login', {params: {username: this.ruleLoginForm.user, password: this.ruleLoginForm.pass, verify: this.ruleLoginForm.verify}}).then(function (response) {
            if (response !== false) {
              vm.$store.dispatch('InitUser', response).then(() => {
                vm.$message({message: '登录成功！', type: 'success'})
                setTimeout(() => {
                  vm.$router.push({path: '/'})
                }, 2000)
              }).catch(() => {
                vm.$message.error('系统异常，请联系管理员')
              })
            } else {
              vm.$message.error('登录失败，请检查账号密码')
            }
          })
        } else {
          return false
        }
      })
    },
    referCaptcha: function () {
      this.captcha = this.APIURL + '/captcha?_=' + Math.random()
    }
  },
  mounted: function () {
    this.referCaptcha()
  }
}
</script>
<style>
    .loginInput .el-input__inner {
        height: 33px;
        font-size: 13px;
        box-shadow: none;
        border: 1px solid #e9e9e9;
        background-color: rgba(0, 0, 0, 0.3);
    }
    .loginInputVerify .el-input__inner{
        width:166px;
        height:40px;
    }
    .loginInput .el-input__inner:hover {
        border-color: #e9e9e9;
        background-color: rgba(0, 0, 0, 0.3);
    }
    .loginInput .el-input__inner:focus {
        border-color: #42a5f5;
        box-shadow: none;
        transition-duration: .5s;
        background-color: rgba(0, 0, 0, 0.3);
    }
    .loginInput .el-input__inner::-webkit-input-placeholder {
        line-height: 20px;
    }
    .loginInput .el-input__inner, .loginInput .el-checkbox__inner, .loginInput .el-textarea__inner, .loginInput .el-button {
        border-radius: 0;
    }
    .loginRuleForm .el-form-item.is-success .el-input__inner, .loginRuleForm .el-form-item.is-success .el-input__inner:focus, .loginRuleForm .el-form-item.is-success .el-textarea__inner, .loginRuleForm .el-form-item.is-success .el-textarea__inner:focus{
        border-color:#e9e9e9;
        background-color: rgba(0, 0, 0, 0.3);
    }
    .loginRuleForm .el-form-item.is-error .el-input__inner, .loginRuleForm .el-form-item.is-error .el-input__inner:focus, .loginRuleForm .el-form-item.is-error .el-textarea__inner, .loginRuleForm .el-form-item.is-error .el-textarea__inner:focus, .loginRuleForm .el-message-box__input input.invalid, .loginRuleForm .el-message-box__input input.invalid:focus{
        border-color:#e9e9e9;
        background-color: rgba(0, 0, 0, 0.3);
    }
</style>
